<template>
  <div class="el-box-row">
    <div class="el-box-tab">
      <el-tabs v-model="listParam.sign">
        <el-tab-pane name="1" label="已购课程"></el-tab-pane>
        <!-- <el-tab-pane name="2" label="收藏课程"></el-tab-pane> -->
      </el-tabs>
    </div>
    <div class="el-data">
      <template v-if="listDatas.length > 0">
        <div class="el-course-box">
          <el-row v-for="item in listDatas" :key="item.courseId">
            <el-col :span="3">
              <div class="grid-content el-data-img" @click="clickTo(item)">
                <a><img :src="img_src(item.courseCoverPath)" alt="" /></a>
              </div>
            </el-col>
            <el-col :span="15">
              <div class="grid-content el-data-info">
                <el-row class="el-data-theme">
                  <el-col :span="16">
                    <div class="grid-content" @click="clickTo(item)">
                      <a>{{ item.courseName }}</a>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <span class="el-price">&yen;{{ item.coursePrice }}</span>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <span class="el-data-info-item">学段：{{ item.courseGradeName }}</span>
                    <span class="el-data-info-item">学科：{{ item.courseSubjectName }}</span>
                    <span class="el-data-info-item">版本：{{ item.courseVersionName }}</span>
                    <span class="el-data-info-item">册别：{{ item.courseVolumeName }}</span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content el-data-btn">
                <template v-if="listParam.sign == 4">
                  <el-button type="primary" @click="clickTo(item)">查看</el-button>
                </template>
                <template v-else>
                  <i class="el-icon-star-on" style="font-size: 28px;"></i>
                </template>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="width:100%;height:35px;"></div>
        <div class="el-page">
          <el-pagination
            background
            :layout="listPages.layout"
            :current-page="listPages.current"
            :page-sizes="listPages.sizes"
            :page-size="listPages.size"
            :total="listPages.total"
            :prev-text="listPages.prevtext"
            :next-text="listPages.nexttext"
            :page-count="listPages.count"
            :pageer-count="listPages.counter"
            :hide-on-single-page="listPages.single"
            @size-change="page_size_change"
            @current-change="page_current_change"
          ></el-pagination>
        </div>
      </template>
      <template v-else>
        <div>
          <span>你还没有购买课程，去</span>
          <router-link to="/goods/index" style="color: #409EFF;">购买课程</router-link>
        </div>
      </template>
    </div>
  </div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
